<script setup lang="ts">
import { ref, watch } from 'vue';

import { Warning } from '@element-plus/icons-vue';
import { ElButton, ElDialog, ElIcon } from 'element-plus';

import { $t } from '#/locales';

interface Props {
  modelValue: boolean;
  errorMessage?: string;
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'confirm'): void;
}

const props = withDefaults(defineProps<Props>(), {
  errorMessage: '',
});

const emit = defineEmits<Emits>();

const visible = ref(false);

watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue;
  },
  { immediate: true },
);

watch(visible, (newValue) => {
  emit('update:modelValue', newValue);
});

function handleConfirm() {
  visible.value = false;
  emit('confirm');
}
</script>

<template>
  <ElDialog
    v-model="visible"
    :title="$t('authentication.loginStatusError')"
    :width="400"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    center
  >
    <div class="flex flex-col items-center space-y-4">
      <ElIcon :size="48" color="#f56c6c">
        <Warning />
      </ElIcon>
      <p class="text-center text-gray-600">
        {{ errorMessage || $t('authentication.loginStatusErrorDesc') }}
      </p>
    </div>

    <template #footer>
      <div class="flex justify-center">
        <ElButton type="primary" @click="handleConfirm">
          {{ $t('common.confirm') }}
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
